<template>
  <div class="detail">
    <!-- 面包屑导航 -->
    <div class="crumbs-shop">
      <div class="content">
        <div class="crumbs">
          <!-- <a href="javascript:void(0)"
             class="item-a">首页</a>
          <span class="arrow">></span>
          <a href="javascript:void(0)"
             class="item-a">数码科技</a>
          <span class="arrow">></span>
          <a href="javascript:void(0)"
             class="item-a">手机</a>
          <span class="arrow">></span>
          <span class="item-span">iPhone 11 Pro Max</span>-->
        </div>
        <div class="shop-box">
          <a :href="'/shopIndex?sid=' + prodInfo.shopId" class="shop">
            <i class="self" v-if="shopInfo && shopInfo.shopId === 1">{{$t('prodDetail.selfEmployed')}}</i>
            <i class="shop-icon" v-if="shopInfo && shopInfo.shopId != 1"></i>
            {{ shopInfo ? shopInfo.shopName : '' }}
          </a>

          <a href="javascript:void(0)" @click="toChatIm(prodInfo)" class="im-chat"><span class="btn-im"></span>{{$t('prodDetail.contactCustomerService')}}</a>

          <span
            class="favourite"
            v-if="!isShopCollection"
            @click="toggleShopCollect"
          >
            <i class="favourite-icon"></i>{{$t('prodDetail.collectionStores')}}
          </span>
          <span class="favourite active" @click="toggleShopCollect" v-else>
            <i class="favourite-icon"></i>{{$t('prodDetail.collectedStores')}}
          </span>
        </div>
      </div>
    </div>
    <!-- /面包屑导航 -->

    <div class="content">
      <div class="detail-up">
        <!-- 商品图片 -->
        <div class="img">
          <div class="big-img">
            <img v-if="!prodInfo.video || !showVideo" :src="prodInfo.pic" alt />
            <!-- 商品视频 -->
            <video
              v-show="showVideo"
              id="prodVideo"
              class="big-img prod-video"
              :src="prodInfo.video"
              controls
            ></video>
            <!-- 商品视频end -->
            <div class="oper-btn" v-if="showPlayBtn && prodInfo.video">
              <img
                src="~/assets/images/play.png"
                @click="playVideo"
                alt="播放"
              />
            </div>
            <div class="close-btn" v-if="!showPlayBtn && showVideo">
              <img
                src="~/assets/images/close.png"
                alt="关闭"
                @click="stopVideo"
              />
            </div>
          </div>
          <div class="small-img">
            <i
              class="left-arrow"
              @click="prevImg"
              :class="{
                limit: prodImgs.length - 5 <= 0 || this.offsetCount < 1
              }"
              >&lt;</i
            >
            <i
              class="right-arrow"
              @click="nextImg"
              :class="{
                limit:
                  prodImgs.length - 5 <= 0 ||
                  this.offsetCount >= prodImgs.length - 5
              }"
              >&gt;</i
            >
            <div class="img-box">
              <div class="offset-box" ref="carouser">
                <div
                  class="item"
                  v-for="(item, index) in prodImgs"
                  :key="index"
                  :class="{ active: item.isActive }"
                  @click="changeProdImg(index)"
                >
                  <img :src="item.img" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /商品图片 -->
        <!-- 商品详情 -->
        <div class="info">
          <div class="name-box">
            <div class="name">{{ prodInfo.prodName }}</div>
            <div class="des">
              {{ prodInfo.brief }}
              <span v-if="prodInfo.brief && prodInfo.brief!==null &&discountDet.length>0">,</span>
              <span class="discount-info" v-if="discountDet.length">
                <a
                  href="javascript:void(0)"
                  class="go-discount"
                  @click="toDiscountDetail(discountDet[0].discountId)"
                >
                  {{ discountDet[0].discountName }}{{$t('prodDetail.specialZone')}}，{{
                    discountDet[0].endTime.substring(0, 10)
                  }}{{$t('prodDetail.deadline')}}，{{$t('prodDetail.grabYourCopyNow')}}
                  <span class="arr">&gt;&gt;</span>
                </a>
              </span>
            </div>
          </div>
          <!-- 预售商品 -->
          <div class="activity" v-if="prodInfo.preSellStatus == 1 && prodInfo.prodType != 1">
            <div class="name group-buy">{{$t('prodDetail.preSale')}}</div>
            <div class="limit">
              {{$t('prodDetail.expected')}}&nbsp;&nbsp;{{ prodInfo.preSellTime }}&nbsp;&nbsp;{{$t('prodDetail.startShipping')}}
            </div>
          </div>
          <!-- /预售商品 -->
          <!-- 拼团商品 -->
          <div class="activity" v-if="prodInfo.prodType == 1 && prodInfo.code!==-1">
            <div class="name group-buy">{{$t('prodDetail.groupingTogetherForMoreBenefits')}}</div>
            <div class="limit">
              {{$t('prodDetail.distanceActivity')}} {{ countdown.obj.signs ? $t('end') : $t('start') }} {{$t('onlyLeft')}}：
              <span class="time" v-if="countdown.obj.day"
                >{{ countdown.obj.day }}{{$t('day')}}{{ countdown.obj.hou }}:{{
                  countdown.obj.min
                }}:{{ countdown.obj.sec }}</span
              >
              <span class="time" v-else
                >{{ countdown.obj.hou }}:{{ countdown.obj.min }}:{{
                  countdown.obj.sec
                }}</span
              >
            </div>
          </div>
          <!-- /拼团商品 -->
          <div class="price-box">
            <div class="item goods-price">
              <span class="tit">{{$t('price')}}</span>
              <div class="con">
                <div class="price">
                  ￥
                  <span class="big">{{ parsePrice(defaultSku.price)[0] }}</span>
                  .{{ parsePrice(defaultSku.price)[1] }}
                </div>
                <div class="old-price" v-if="defaultSku.oriPrice">￥{{ defaultSku.oriPrice }}</div>
              </div>
              <span v-if="findSku" class="tit">{{$t('prodDetail.remainingInventory')}}</span>
              <div v-if="findSku" class="con">
                {{defaultSku.stocks}}
              </div>
            </div>
            <!-- 预售 -->
            <div class="item coupons" v-if="prodInfo.prodType == 1 && prodInfo.code!==-1 && prodInfo.preSellStatus == 1">
              <span class="tit">{{$t('prodDetail.preSale')}}</span>
              <div class="con pre-sale-red">
                {{$t('prodDetail.thisItemIsAPreSaleItem')}}，{{$t('prodDetail.expected')}}&nbsp;&nbsp;{{ prodInfo.preSellTime | cutDate }}&nbsp;&nbsp;{{$t('prodDetail.startShipping')}}
              </div>
            </div>
            <!-- /预售 -->
            <!-- 领券 -->
            <div class="item coupons" v-if="couponList.length > 0">
              <span class="tit">{{$t('vouchers')}}</span>
              <div class="con">
                <div
                  class="coupon-block"
                  v-for="coupon in couponList"
                  :key="coupon.couponId"
                  @click="receiveCoupon(coupon)"
                >
                  <span class="conpon" v-if="coupon.couponType == 1 && $t('full')=='满'"
                    >{{$t('full')}}{{ coupon.cashCondition }}{{$t('less')}}{{$t('yuan')}}{{
                      coupon.reduceAmount
                    }}</span
                  >
                  <span class="conpon" v-if="coupon.couponType == 2 && $t('full')=='满'"
                    >{{$t('full')}}{{ coupon.cashCondition }}{{$t('enjoy')}}{{
                      coupon.couponDiscount
                    }}{{$t('fold')}}</span
                  >

                  <!-- 英文版优惠卷样式 -->
                  <span class="conpon" v-if="coupon.couponType == 1 && $t('full')!='满'"
                    >{{coupon.reduceAmount + " off over "}}{{ coupon.cashCondition }}</span
                  >
                  <span class="conpon" v-if="coupon.couponType == 2 && $t('full')!='满'"
                    >{{ coupon.cashCondition +'%'+" off over"}} {{coupon.couponDiscount}}</span
                  >
                </div>
                <nuxt-link to="/coupons" class="more">
                  {{$t('more')}}
                  <i class="arrow">>></i>
                </nuxt-link>
              </div>
            </div>
            <!-- /领券 -->
            <!-- 限时特惠 -->
            <div class="item discount" v-if="discountDet.length">
              <span class="tit">{{$t('promotion')}}</span>
              <div class="con">
                <div class="discount-con">
                  <div
                    class="discount-item"
                    :class="index > 0 ? 'item-box' : ''"
                    v-for="(item, index) in discountDet"
                    :key="item.discountId"
                  >
                    <div class="type">
                      {{
                        [$t('prodDetail.fullAmountReduction'), ('prodDetail.fullPieceDiscount'), $t('prodDetail.fullDiscount'), $t('prodDetail.discountOnFullItems')][
                          item.discountRule
                        ]
                      }}
                    </div>
                    <div class="text">{{ item.discountName }}</div>
                    <a
                      href="javascript:void(0)"
                      class="det"
                      @click="toDiscountDetail(item.discountId)"
                    >
                      {{$t('more')}}
                      <span class="arr">&gt;&gt;</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <!-- /限时特惠 -->
            <!-- <div class="item distribution">
              <span class="tit">配送</span>
              <div class="con">限时免邮（新疆、内蒙等地区除外）</div>
            </div>-->
          </div>
          <div class="sku-box" v-if="prodInfo.skuList.length">
            <div
              class="items sku-text"
              v-for="(skuLine, key) in skuGroup"
              :key="key"
            >
              <span class="tit">{{ key }}</span>
              <div class="con">
                <span
                  class="item"
                  @click="toChooseItem(skuLineItem, key, $event)"
                  :class="[
                    selectedProp.indexOf(skuLineItem) !== -1 ? 'active' : '',
                    isSkuLineItemNotOptional(
                      allProperties,
                      selectedPropObj,
                      key,
                      skuLineItem,
                      propKeys
                    )
                      ? 'not-optional'
                      : ''
                  ]"
                  v-for="(skuLineItem,index) in skuLine"
                  :key="index"
                  >{{ skuLineItem }}</span
                >
              </div>
            </div>
          </div>
          <!-- 计数器 -->
          <div class="sku-box">
            <div class="items">
              <span class="tit">{{$t('quantity')}}</span>
              <div class="con">
                <div class="goods-number" onselectstart="return false">
                  <span
                    :class="['reduce', this.prohibit1 ? 'limit' : '']"
                    @click="reduce"
                    >-</span
                  >
                  <!-- <input type="number" class="number" v-model="prodNum" /> -->
                  <input
                    type="number"
                    class="number"
                    v-model="prodNum"
                    oninput="value=value.replace(/[^\d]/g,'')"
                    @blur="judgeInput"
                  />
                  <span
                    :class="['increase', this.prohibit2 ? 'limit' : '']"
                    @click="increase"
                    >+</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="btns" v-if="prodInfo.prodType != 1">
            <a
              href="javascript:void(0)"
              class="buy-now"
              @click="buyNow"
              v-if="prodInfo.prodType != 1 && findSku && defaultSku.stocks"
              >{{$t('buyNow')}}</a
            >
            <a href="javascript:void(0)" class="shortage" v-else-if="!findSku"
              >{{$t('prodDetail.productNotInStock')}}</a
            >
            <a
              href="javascript:void(0)"
              class="shortage"
              v-else-if="!defaultSku.stocks"
              >{{$t('prodDetail.productOutOfStock')}}</a
            >
            <a
              href="javascript:void(0)"
              class="add-cart"
              v-if="findSku && defaultSku.stocks"
              @click="addToCart"
              >{{$t('prodDetail.addToCart')}}</a
            >
            <a
              href="javascript:void(0)"
              class="collect"
              v-if="!isCollection"
              @click="toggleCollect()"
            >
              <i class="icon"></i>{{$t('prodDetail.collectionOfProducts')}}
            </a>
            <a
              href="javascript:void(0)"
              class="collected"
              v-if="isCollection"
              @click="toggleCollect()"
            >
              <i class="icon"></i>{{$t('prodDetail.bookmarked')}}
            </a>
          </div>
          <!-- 拼团按钮 -->
          <div class="btns group-btn" v-if="prodInfo.prodType === 1">
            <a href="javascript:void(0)" :class="['build-group', countdown.obj.signs?'':'disabled-gray',this.$store.state.locale == 'en'?'en':'']" v-if="findSku">
              <span class="group-price"
                >￥{{
                  groupSkuList.actPrice ? groupSkuList.actPrice.toFixed(2) : ''
                }}</span
              >
              <span class="group-text">{{$t('prodDetail.iWantToOpenAGroup')}}</span>
              <!-- <span class="group-code">
                <span class="text">手机扫码开团</span>
                <span class="code-img">
                  <img :src="miniQrCodeImg" alt />
                </span>
              </span>-->
              <div class="group-code">
                <span class="text">{{countdown.obj.signs?$t('prodDetail.cellPhoneScanCodeOpenGroup'):$t('prodDetail.groupingActivitiesHaveNotStarted')}}</span>
                <div :class="['code-img',countdown.obj.signs?'':'display-none' ]" id="spellQrcode"></div>
              </div>
            </a>
            <a
              href="javascript:void(0)"
              :class="['alone-group', !findSku ? 'cannotbuy' : '',this.$store.state.locale == 'en'?'en':'']"
              @click="buyNow"
            >
              <span class="group-price"
                >￥{{ Number(defaultSku.price).toFixed(2) }}</span
              >
              <span class="group-text">{{$t('prodDetail.separatePurchase')}}</span>
            </a>
            <a
              href="javascript:void(0)"
              class="add-cart add-cart-group"
              v-if="findSku"
              @click="addToCart"
            >
              <!-- && defaultSku.stocks -->
              <span>{{$t('prodDetail.addToCart')}}</span>
            </a>
            <a
              href="javascript:void(0)"
              class="collect"
              v-if="!isCollection"
              @click="toggleCollect()"
            >
              <i class="icon"></i>{{$t('prodDetail.collectionOfProducts')}}
            </a>
            <a
              href="javascript:void(0)"
              class="collected"
              v-if="isCollection"
              @click="toggleCollect()"
            >
              <i class="icon"></i>{{$t('prodDetail.bookmarked')}}
            </a>
          </div>
          <!-- /拼团按钮 -->
        </div>
        <!-- 商品详情 -->
      </div>
      <div class="detail-down">
        <div class="introduce-box">
          <div class="tab">
            <div
              :class="['item', introduceOrCommentInt ? 'active' : '']"
              @click="toggleIntroduceInt"
            >
              {{$t('prodDetail.productIntroduction')}}
            </div>
            <div
              :class="['item', introduceOrCommentCom ? 'active' : '']"
              @click="toggleIntroduceCom"
            >
              {{$t('prodDetail.productReviews')}}
              <i class="number">（{{ prodCommData.number }}）</i>
            </div>
          </div>
          <!-- <transition name="fade"> -->
          <!-- 商品介绍 -->
          <div class="introduce" v-if="introduceOrCommentInt">
            <div v-html="prodInfo.content"></div>
          </div>
          <!-- /商品介绍 -->
          <!-- </transition> -->
          <!-- <transition name="fade"> -->
          <!-- 商品评论 -->
          <div class="comment" v-if="introduceOrCommentCom">
            <!-- 好评率 -->
            <div class="good-rates">
              <div class="score">
                <div class="tit">{{$t('prodDetail.favorableRatingRate')}}：</div>
                <div class="con">{{ prodCommData.positiveRating }}%</div>
              </div>
              <div class="average">
                <div class="item">
                  <div class="text">5.0</div>
                  <div class="stars">
                    <i class="star"></i>
                    <i class="star"></i>
                    <i class="star"></i>
                    <i class="star"></i>
                    <i class="star"></i>
                  </div>
                  <div class="number">（{{ prodCommData.scoreNumber5 }}）</div>
                </div>
                <div class="item">
                  <div class="text">4.0</div>
                  <div class="stars">
                    <i class="star"></i>
                    <i class="star"></i>
                    <i class="star"></i>
                    <i class="star"></i>
                    <i class="star-gray"></i>
                  </div>
                  <div class="number">（{{ prodCommData.scoreNumber4 }}）</div>
                </div>
                <div class="item">
                  <div class="text">3.0</div>
                  <div class="stars">
                    <i class="star"></i>
                    <i class="star"></i>
                    <i class="star"></i>
                    <i class="star-gray"></i>
                    <i class="star-gray"></i>
                  </div>
                  <div class="number">（{{ prodCommData.scoreNumber3 }}）</div>
                </div>
                <div class="item">
                  <div class="text">2.0</div>
                  <div class="stars">
                    <i class="star"></i>
                    <i class="star"></i>
                    <i class="star-gray"></i>
                    <i class="star-gray"></i>
                    <i class="star-gray"></i>
                  </div>
                  <div class="number">（{{ prodCommData.scoreNumber2 }}）</div>
                </div>
                <div class="item">
                  <div class="text">1.0</div>
                  <div class="stars">
                    <i class="star"></i>
                    <i class="star-gray"></i>
                    <i class="star-gray"></i>
                    <i class="star-gray"></i>
                    <i class="star-gray"></i>
                  </div>
                  <div class="number">（{{ prodCommData.scoreNumber1 }}）</div>
                </div>
              </div>
            </div>
            <!-- /好评率 -->
            <!-- 评论列表 -->
            <div class="comment-tab">
              <div
                class="item"
                :class="evaluate === -1 ? 'active' : ''"
                @click="getProdCommPageByProd(-1)"
              >
                {{$t('all')}}
                <span class="number">（{{ prodCommData.number }}）</span>
              </div>
              <div
                class="item"
                :class="evaluate === 0 ? 'active' : ''"
                @click="getProdCommPageByProd(0)"
              >
                {{$t('prodDetail.goodReview')}}
                <span class="number">（{{ prodCommData.praiseNumber }}）</span>
              </div>
              <div
                class="item"
                :class="evaluate === 1 ? 'active' : ''"
                @click="getProdCommPageByProd(1)"
              >
                {{$t('prodDetail.mediumRating')}}
                <span class="number"
                  >（{{ prodCommData.secondaryNumber }}）</span
                >
              </div>
              <div
                class="item"
                :class="evaluate === 2 ? 'active' : ''"
                @click="getProdCommPageByProd(2)"
              >
                {{$t('prodDetail.poorReviews')}}
                <span class="number"
                  >（{{ prodCommData.negativeNumber }}）</span
                >
              </div>
              <div
                class="item"
                :class="evaluate === 3 ? 'active' : ''"
                @click="getProdCommPageByProd(3)"
              >
                {{$t('prodDetail.withPictures')}}
                <span class="number">（{{ prodCommData.picNumber }}）</span>
              </div>
            </div>
            <div class="comment-con" v-if="prodCommList.records.length">
              <div
                class="item"
                v-for="(item, comIndex) in prodCommList.records"
                :key="item.prodCommId"
              >
                <div class="buyer-msg">
                  <div class="img">
                    <img :src="item.pic" alt v-if="item.pic" />
                    <img src="~/assets/images/buyer-img.png" alt v-else />
                  </div>
                  <div class="name">
                    {{ item.nickName ? item.nickName : $t('prodDetail.anonymousUser') }}
                  </div>
                </div>
                <div class="buyer-comment">
                  <div class="stars">
                    <i
                      class="star"
                      v-for="index in item.score"
                      :key="index"
                    ></i>
                  </div>
                  <div class="text">
                    <span style="white-space:pre-wrap;">{{
                      item.content
                    }}</span>
                  </div>
                  <div class="img-box" v-if="item.pics">
                    <span
                      class="img"
                      v-for="(img, imgIndex) in item.prodImgs"
                      :key="imgIndex"
                    >
                      <img
                        :src="img"
                        @click="imgShow(comIndex, imgIndex)"
                        alt
                      />
                      <div class="big-img-show" v-if="showBigImg">
                        <!-- <div v-for="imgIndex in item.prodImgs" :key="imgIndex"> -->
                        <i class="left-arrow" @click="prevImgCom()">&lt;</i>
                        <i class="right-arrow" @click="nextImgCom()">&gt;</i>
                        <div class="mask" @click="closeShowBigImg"></div>
                        <img :src="imgPath" />
                        <!-- </div> -->
                      </div>
                    </span>
                  </div>
                  <div class="time-sku">
                    <span class="time">{{ item.recTime }}</span>
                    <!-- <span class="sku">银色 256GB</span> -->
                  </div>
                  <!-- <div class="append-comment">
                      <div class="append-time">购买5天后追评</div>
                      <div class="append-con">刚买完没几天就降价了，心痛啊啊啊啊啊啊啊啊啊啊啊啊</div>
                  </div>-->
                  <div class="seller-reply" v-if="item.replyContent">
                    <div class="tit">{{$t('prodDetail.merchantResponse')}}：</div>
                    <div class="con">{{ item.replyContent }}</div>
                    <div class="time">{{ item.replyTime }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="comment-con" v-if="!prodCommList.records.length">
              <div class="comment-empty">{{$t('prodDetail.noComments')}}</div>
            </div>
            <!-- /评论列表 -->
            <!-- 页码 -->
            <div class="pagination">
              <div class="pages" v-if="page.pages >= 1">
                <a
                  href="javascript:void(0);"
                  class="item prev"
                  :class="{ default: page.current <= 1 }"
                  @click="getSearchProdPage(page.current - 1)"
                  >{{$t('pagination.previousPage')}}</a
                >
                <div v-for="item in page.rainbow" :key="item.prodId">
                  <a
                    href="javascript:void(0);"
                    @click="getSearchProdPage(item)"
                    class="item"
                    :class="{ cur: page.current == item }"
                    v-if="item !== '...'"
                    >{{ item }}</a
                  >
                  <span class="ellipsis" v-else>...</span>
                </div>

                <a
                  href="javascript:void(0);"
                  class="item next"
                  :class="{ default: page.current > page.pages - 1 }"
                  @click="getSearchProdPage(page.current + 1)"
                  >{{$t('pagination.nextPage')}}</a
                >
                <!-- <div class="go-page">
                    到第
                    <input type="text"
                           class="page-input" />页
                    <a href
                       class="page-btn">GO</a>
                </div>-->
                <div class="total-num">
                  {{$t('pagination.total')}}
                  <span class="num">{{ page.pages }}</span
                  >{{$t('pagination.page')}}
                </div>
              </div>
              <!-- /页码 -->
            </div>
          </div>
          <!-- /商品评论 -->
          <!-- </transition> -->
        </div>
        <div class="side">
          <!-- 店内搜索 -->
          <div class="shop-search">
            <div class="tit">{{$t('prodDetail.inStoreSearch')}}</div>
            <div class="con">
              <input type="text" class="text" v-model="prodName" />
              <a href="javascript:void(0)" class="btn" @click="toShopIndex"></a>
            </div>
          </div>
          <!-- /店内搜索 -->
          <!-- 店内分类 -->
          <div class="shop-category">
            <div class="tit">{{$t('prodDetail.inStoreCategories')}}</div>
            <div class="con">
              <div
                class="items active"
                v-for="(item, index) in shopCategorys"
                :key="index"
              >
                <nuxt-link
                  :to="
                    '/shopIndex?sid=' +
                      prodInfo.shopId +
                      '&cid=' +
                      item.categoryId
                  "
                >
                  <div class="item-main">{{ item.categoryName }}</div>
                </nuxt-link>
              </div>
            </div>
          </div>
          <!-- 店内分类 -->
          <!-- 热销产品 -->
          <div class="sale-well">
            <div class="tit">{{$t('prodDetail.hotProducts')}}</div>
            <div class="con">
              <div
                class="item"
                v-for="item in hotSales.records"
                :key="item.prodId"
              >
                <nuxt-link :to="'/detail/' + item.prodId">
                  <div class="goods-img">
                    <img :src="item.pic" alt />
                  </div>
                  <div class="goods-msg">
                    <div class="goods-name">{{ item.prodName }}</div>
                    <div class="goods-price">
                      <div class="price">
                        ￥
                        <span class="big">{{ parsePrice(item.price)[0] }}</span>
                        .{{ parsePrice(item.price)[1] }}
                      </div>
                    </div>
                  </div>
                </nuxt-link>
              </div>
            </div>
          </div>
          <!-- 热销产品 -->
        </div>
      </div>
    </div>

    <!-- 滑动导航 -->
    <transition name="fade">
      <div class="scroll-tab" v-if="showScrollTab">
        <div class="content">
          <div class="shop-search">
            <input
              type="text"
              class="text"
              v-model="prodName"
              :placeholder="$t('prodDetail.inStoreSearch')"
            />
            <a href="javascript:void(0)" class="btn" @click="toShopIndex"></a>
          </div>
          <div class="tab">
            <div
              :class="['item', introduceOrCommentInt ? 'active' : '']"
              @click="toggleIntroduceInt"
            >
              {{$t('prodDetail.productIntroduction')}}
            </div>
            <div
              :class="['item', introduceOrCommentCom ? 'active' : '']"
              @click="toggleIntroduceCom"
            >
              {{$t('prodDetail.productReviews')}}
              <i class="number">（{{ prodCommData.number }}）</i>
            </div>
          </div>
          <div class="add-cart-btn" @click="addToCart">{{$t('prodDetail.addToCart')}}</div>
        </div>
      </div>
    </transition>
    <!-- /滑动导航 -->

    <!-- 弹窗 -->
    <div class="popup-mask" v-if="false"></div>
    <div class="popup-box" v-if="false">
      <div class="tit">
        <div class="text">{{$t('tips')}}</div>
        <div class="close"></div>
      </div>
      <div class="con">
        <div class="tip">
          <div class="tip-
           success"></div>
          <div class="tip-info">
            <div class="result">
              {{$t('prodDetail.congratulationsYouHaveSuccessfullyReceived')}}
              <span class="number"> <i class="small">￥</i>500 </span>{{$t('discountCoupon')}}！
            </div>
            <div class="date">{{$t('prodDetail.timeOfUse')}}：2019.12.12-2019.12.12</div>
            <div class="btns">
              <a href="javascript:void(0)" class="btn">
                {{$t('prodDetail.viewCouponsCollected')}}
                <span class="arrow">>></span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /弹窗 -->
    <!-- 登录弹窗组件 -->
    <LoginPopup v-if="showLogin" v-on:hideLoginPop="hideLoginPop" />
    <!-- /登录弹窗组件 -->
  </div>
</template>

<script>
import util from '~/plugins/util'
import CategroySidebar from '~/components/categroy-sidebar'
import LoginPopup from '~/components/login-popup'
import PageUtil from '~/plugins/pageUtil'
import Cookie from 'js-cookie'
import bus from '~/plugins/bus'
import { h5Path } from '~/plugins/config'
export default {
  components: {
    CategroySidebar,
    LoginPopup
  },
  data() {
    return {
      // groupActivityId: this.$route.params.groupActivityId,
      showLogin:false,
      prodId: this.$route.params.prodId,
      prodName: '',
      prodInfo: {},
      prodImgs: [],
      offsetCount: 0,  //图片偏移数
      imgCounts: 0,  //缩略图数量
      showScrollTab: false,
      introduceOrCommentInt: true,  // true商品介绍  false商品评论
      introduceOrCommentCom: false,
      prodCommData: {},
      prodCommType: true,  // 商品评论类型
      prodCommList: {},
      shopInfo: {},
      evaluate: -1,
      hotSales: {},
      defaultSku: {}, // 选中的sku
      skuGroup: [], //
      selectedProp: [],
      findSku: true, // 能不能找得到sku
      prodNum: 1, //计数器数量
      // prohibit: false,  //计数器是否禁用
      prohibit1: true,  //计数器-是否禁用
      prohibit2: false,  //计数器+是否禁用
      isCollection: false, //商品是否已收藏
      isShopCollection: false,//店铺是否已收藏
      couponList: [],  //优惠券
      totalCartNum: 0,  //购物车数量
      shopCategorys: [],
      page: {
        pages: 0, // 总页数
        rainbow: [], // 分页条
        current: 1
      },
      groupProdInfo: {},  //团购
      countdown: { obj: { day: '', hou: '', min: '', sec: '', signs: '' } },  //倒计时
      groupSkuList: {},  //团购sku信息
      miniQrCodeImg: '',  //团购跳转二维码
      discountDet: [],  //限时特惠专区详情


      showVideo: false, // 是否展示视频
      showPlayBtn: true, // 视频播放按钮

      imgPath: '', // 当前点击的评论图片
      showBigImg: false,  // 评论大图显隐
      scrollTop: 0,

      oriPrice: 0, // 市场价

      bigComIndex: -1, // 评论大图切换
      bigImgIndex: -1,      // 评论大图切换
      hasMaxNum: 0, // 是否限购 1限购
      maxNum: 0, // 限购数量
    }
  },
  head() {
    return {
      title: this.$t('prodDetail.productDetails'),
    }
  },
  //在页面加载之前先加载数据
  async asyncData({ app, params, redirect }) {
    const data = await app.$axios.get('/prod/prodInfo', {
      params: {
        prodId: params.prodId
      }
    }).then(({ data }) => {
      console.log(data)
      console.log('data==')
      return data
    }).catch((err) => {
      return redirect('/error')
    })


    if (data.imgs) {
      var prodImgs = []
      data.imgs.split(',').forEach(imgStr => {
        prodImgs.push({
          img: imgStr,
          isActive: false
        })
      })
      prodImgs[0].isActive = true
      // console.log(prodImgs)
    }


    data.content = util.formatHtml(data.content) // 去除商品详情富文本样式
    return {
      prodInfo: data,
      prodImgs: prodImgs,
      shopId: data.shopId,
      activityId: data.activityId,
      oriPrice: data.oriPrice
    }
  },

  watch: {
    // prodNum(nv) {
    //   if (nv <= 1) {
    //     this.prohibit1 = true
    //   } else {
    //     this.prohibit1 = false
    //   }
    // }
    prodNum(nv) {
      if (nv <= 1) {
        this.prohibit1 = true
        if(this.defaultSku.stocks == 0 || nv == this.defaultSku.stocks){
          this.prohibit2 = true
        }
      }else if(nv == this.defaultSku.stocks){
        this.prohibit2 = true
      }else {
        this.prohibit1 = false
        this.prohibit2 = false
      }
    }

  },
  filters: {
    // 截取日期:  2020-11-25 00:00:00  ->  2020-11-25
    cutDate(dateStr) {
      if (!dateStr) return ""
      return dateStr = dateStr.split(' ')[0]
    }
  },
  mounted() {
    // 设置网页标题
    document.title = this.$t('prodDetail.productDetails')
    if (this.prodInfo.video) {
      // 获取商品视频
      this.prodVideo = document.getElementById("prodVideo")
      this.showPlayBtn = true
    }
    // // 提前加载拼团时间
    this.groupBuyInfo()

    // //查询商品是否已经收藏
    this.isProdCollected()
    this.isShopCollected()
    // //获取店铺分类
    this.getShopCategory()

    this.getShopHead(this.prodInfo.shopId)
    // //获取热销商品
    this.getHotSales();

    // // 获取商品评论数
    this.$axios.get('/prod/prodCommData', {
      params: {
        prodId: this.$route.params.prodId
      }
    }).then(({ data }) => {
      this.prodCommData = data
    })

    this.getProdCommPageByProd(-1);

    // // 监听页面滚动
    window.addEventListener('scroll', this.scrollToTop);

    // //优惠券
    this.getCouponList()

    // //通过商品id获取商品所有促销活动
    this.$axios.get('/marking/discount/getDiscountByProdId', {
      params: {
        prodId: this.$route.params.prodId
      }
    }).then(({ data }) => {
      this.discountDet = data
    })
    // // 组装sku
    this.groupSkuProp(this.prodInfo.skuList, this.prodInfo.price)
  },

  methods: {

    /**
     * 页面滚动事件
     */
    scrollToTop() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.showScrollTab = scrollTop > 750 ? true : false
    },
    /**
    * 生成二维码- 拼团跳转到h5
    */
    loadQRCode() {
      let qrcode = new QRCode('spellQrcode', {
        text: h5Path + `/pages/prod/prod?prodid=${this.prodId}&groupActivityId=${this.activityId}`,
        width: 110,
        height: 110,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: 3
      })
    },

    /**
     * 评论点击图片显示大图
     */
    imgShow(comIndex, imgIndex) {
      this.bigComIndex = comIndex
      document.documentElement.style.overflowY = 'hidden'

      var bigProdImgs = this.prodCommList.records[comIndex].prodImgs.length
      if (imgIndex == -1) {
        this.closeShowBigImg()
        this.bigImgIndex = -1
        this.bigComIndex = -1
        return
      }
      if (imgIndex == bigProdImgs) {
        this.closeShowBigImg()
        this.bigImgIndex = -1
        this.bigComIndex = -1
        return
      }
      let imgPath = this.prodCommList.records[comIndex].prodImgs[imgIndex]
      this.imgPath = imgPath
      if (this.imgPath) {
        this.showBigImg = true
      }
      let dom = document.getElementsByTagName("body").className = "hid";
      this.bigImgIndex = imgIndex
    },

    prevImgCom() {
      var comIndex = this.bigComIndex
      var imgIndex = this.bigImgIndex - 1
      this.imgShow(comIndex, imgIndex)
    },

    nextImgCom() {
      var comIndex = this.bigComIndex
      var imgIndex = this.bigImgIndex + 1
      this.imgShow(comIndex, imgIndex)
    },

    /**
     * 关闭评论大图显隐
     */
    closeShowBigImg() {
      this.showBigImg = false
      document.documentElement.style.overflowY = 'scroll'
    },

    /**
     * 关闭视频
     */
    stopVideo() {
      this.showVideo = false
      this.prodVideo.pause()
      this.showPlayBtn = true
    },

    /**
     * 播放视频
     */
    playVideo() {
      this.showVideo = true
      this.prodVideo.play(0)
      this.showPlayBtn = false
    },

    // 切换图片
    prevImg() {
      if (this.prodImgs.length - 5 > 0) {
        if (this.offsetCount > 0) {
          this.offsetCount--;
          this.$refs.carouser.style.left = '-' + (78 * this.offsetCount) + 'px';
        } else {
          return false
        }
      } else if (this.prodImgs.length - 5 <= 0) {
        return false
      } else {
        return false
      }
    },
    nextImg() {
      if (this.prodImgs.length - 5 > 0) {
        if (this.offsetCount < this.prodImgs.length - 5) {
          this.offsetCount++;
          this.$refs.carouser.style.left = '-' + (78 * this.offsetCount) + 'px';
        } else if (this.prodImgs.length - 5 <= 0) {
          return false
        } else {
          return false
        }
      } else {
        return false
      }
    },

    /**
     * 商品已下架
     */
    handleClose() {
      this.tipsDialogVisible = false
      this.$router.go(-1)
    },

    /**
     * 团购信息
     */
    groupBuyInfo() {
      if (this.prodInfo.prodType != 1) {
        return
      }
      this.$axios.get('/groupProd/info', {
        params: {
          prodId: this.prodId,
          groupActivityId: this.activityId
        }
      }).then(({ data }) => {
        // 判断活动是否失效
        if (data.code === -1) {
          this.prodInfo.code = -1
          return
        }
        this.groupProdInfo = data.obj  //团购
        this.groupSkuList = data.obj.groupSkuList[0]
        // this.prodInfo.skuList = data.obj.groupSkuList
        this.hasMaxNum = data.obj.hasMaxNum // 是否限购 1限购
        this.maxNum = data.obj.maxNum // 限购数量
        let betweenTimestamp = util.betweenTimestamp(util.dateToTimestamp(this.groupProdInfo.startTime), util.dateToTimestamp(this.groupProdInfo.endTime))
        var countdown = {
          obj: util.betweenTime(betweenTimestamp),
          stamp: betweenTimestamp
        }
        this.countdown = countdown
        this.startCountdown()  //请求倒计时
        // this.getMiniQrCode()  //请求二维码
        this.$nextTick(() => {
          this.loadQRCode();//请求二维码
        })
      })

    },
    /**
     * 倒计时
     */
    startCountdown() {
      this.countdown = {
        stamp: this.countdown.stamp < 0 ? this.countdown.stamp + 1000 : this.countdown.stamp - 1000,
        obj: util.betweenTime(this.countdown.stamp)
      }
      this.timer = setTimeout(() => {
        this.startCountdown()
      }, 1000);
    },
    /**
     * 请求团购小程序二维码
     */
    getMiniQrCode() {
      var contents = {
        groupActivityId: this.activityId,
        prodId: this.prodId
      }
      var content = JSON.stringify(contents)
      this.$axios.get('/qrcodeTicket/miniQrCode', {
        params: {
          content: content,
          type: 1
        },
        responseType: 'blob' // 设置接收格式为blob格式
      }).then(({ data }) => {
        //接受二进制文件流
        this.miniQrCodeImg = window.URL.createObjectURL(data);
      })
    },

    /**
     * 小图点击事件
     */
    changeProdImg(index) {
      this.prodImgs.forEach(prodImg => {
        prodImg.isActive = false
      })
      this.prodImgs[index].isActive = true
      this.prodInfo.pic = this.prodImgs[index].img
    },

    /**
     * 获取店铺信息
     */
    getShopHead(shopId) {
      this.$axios.get('/shop/headInfo', {
        params: {
          shopId: shopId
        }
      }).then(({ data }) => {
        this.shopInfo = data
      })
    },

    /**
     * 获取店铺分类
     */
    getShopCategory() {
      this.$axios.get('/category/categoryInfo', {
        params: {
          shopId: this.shopId
        }
      }).then(({ data }) => {
        this.shopCategorys = data
      })
    },

    /**
     * 价格过滤
     */
    parsePrice(value) {
      var val = Number(value)
      if (!val) {
        val = 0;
      }
      // 截取小数点后两位，并以小数点为切割点将val转化为数组
      return val.toFixed(2).split(".");
    },

    /**
     * 切换商品介绍/商品评论
     */
    toggleIntroduceInt() {
      this.introduceOrCommentInt = true
      this.introduceOrCommentCom = false
    },

    toggleIntroduceCom() {
      this.introduceOrCommentInt = false
      this.introduceOrCommentCom = true
    },

    /**
     * 获取评论分页数据
     */
    getSearchProdPage(current) {
      if (current == 0 || current == this.page.current || current > this.page.pages) {
        return
      } else {
        this.getProdCommPageByProd(this.evaluate, current);
      }
    },

    /**
     * 获取商品评论列表
     */
    getProdCommPageByProd(evaluate, curPage) {
      this.evaluate = evaluate

      this.$axios.get('/prod/prodCommPageByProd', {
        params: {
          prodId: this.$route.params.prodId,
          current: curPage || 1,
          size: 10,
          evaluate: this.evaluate
        }
      }).then(({ data }) => {
        this.prodCommList = data
        this.prodCommList.records.forEach(prodComm => {
          var prodImgs = []
          if (prodComm.pics) {
            prodComm.pics.split(',').forEach(imgStr => {
              prodImgs.push(imgStr)
            })
          }
          prodComm.prodImgs = prodImgs
        })
        data.rainbow = PageUtil.rainbowWithDot(data.current, data.pages, 5)
        this.page = data
      })
    },

    /**
     * 获取热销商品
     */
    getHotSales() {
      this.$axios.get('/search/searchProdPage', {
        params: {
          shopId: this.prodInfo.shopId,
          size: 5,
          sort: 1,
          orderBy: 1,
          isAllProdType: true
        }
      }).then(({ data }) => {
        this.hotSales = data
      })
    },

    /**
     * 收藏商品
     */
    toggleCollect() {
      var prodId = this.prodInfo.prodId
      var isCollection = this.isCollection
      this.$axios.post('/p/user/collection/addOrCancel', prodId).then(({ data }) => {
        this.isCollection = !isCollection
        if (this.isCollection) {
          this.$message({
            message: this.$t('prodDetail.collectionSuccess'),
            type: 'success',
            duration: 1000
          });
        } else {
          this.$message({
            message: this.$t('prodDetail.uncollected'),
            type: 'warning',
            duration: 1000
          });
        }
      })
    },

    /**
     * 查询商品是否已收藏
     */
    isProdCollected() {
      if (!Cookie.get('token')) {
        return
      }
      this.$axios.get('/p/user/collection/isCollection', {
        params: {
          prodId: this.prodInfo.prodId
        }
      }).then(({ data }) => {
        this.isCollection = data
      })
    },

    /**
     * 收藏店铺
     */
    toggleShopCollect() {
      var shopId = this.prodInfo.shopId
      var isShopCollection = this.isShopCollection
      this.$axios.post('/p/shop/collection/addOrCancel', shopId).then(({ data }) => {
        this.isShopCollection = !isShopCollection
        if (this.isShopCollection) {
          this.$message({
            message: this.$t('prodDetail.collectionSuccess'),
            type: 'success',
            duration: 1000
          });
        } else {
          this.$message({
            message: this.$t('prodDetail.uncollected'),
            type: 'warning',
            duration: 1000
          });
        }
      })
    },

    /**
     * 查询店铺是否已收藏
     */
    isShopCollected() {
      if (!Cookie.get('token')) {
        return
      }
      this.$axios.get('/p/shop/collection/isCollection', {
        params: {
          shopId: this.prodInfo.shopId
        }
      }).then(({ data }) => {
        this.isShopCollection = data
      })
    },

    /**
     * 减少商品数量
     */
    reduce() {
      var prodNum = parseInt(this.prodNum)
      if (this.defaultSku.stocks) {
        if (!prodNum || prodNum <= 1) {
          this.prodNum = prodNum
          this.prohibit1 = true  //禁用
          this.prohibit2 = false
        } else {
          this.prodNum = prodNum - 1
          this.prohibit1 = false
          this.prohibit2 = false
        }
      } else {
        this.prodNum = 0
        this.prohibit1 = true
        this.prohibit2 = true
      }
    },

    /*
    * 失去焦点时对输入框的判断
    */
    judgeInput(e) {
      var prodNum = parseInt(this.prodNum)
      if (this.defaultSku.stocks) {
        if (!prodNum || prodNum <= 0) {
          this.prohibit1 = true
          this.prohibit2 = false
        } else {
          this.prohibit1 = false
          this.prohibit2 = false
        }
        // 判断是否限购
        if (this.hasMaxNum) {
          if (prodNum > this.maxNum && this.maxNum < this.defaultSku.stocks) {
            // 输入数值 > 限购数值 && 限购数值 < 库存
            this.$message({
              message: this.$t('purchaseRestrictions') + this.maxNum + this.$t('items'),
              type: 'warning',
              duration: 1000
            });
            this.prohibit1 = false
            this.prohibit2 = true  //禁用
          } else if (prodNum > this.defaultSku.stocks && this.defaultSku.stocks < this.maxNum) {
            // 输入数值 > 库存 && 库存 < 限购数值
            this.$message({
              message: this.$t('prodDetail.insufficientInventory'),
              type: 'warning',
              duration: 1000
            });
            this.prohibit1 = false
            this.prohibit2 = true  //禁用
            this.prodNum = 1
          }
        } else {
          if (prodNum > this.defaultSku.stocks) {
            this.$message({
              message: this.$t('prodDetail.insufficientInventory'),
              type: 'warning',
              duration: 1000
            });
            this.prohibit1 = false
            this.prohibit2 = true
            this.prodNum = 1
          }
        }
      } else {
        this.prodNum = 0
        this.prohibit1 = true
        this.prohibit2 = true
      }
    },

    /**
     * 增加商品数量
     */
    increase() {
      var prodNum = parseInt(this.prodNum)
      if (this.defaultSku.stocks) {
        if (!this.prodNum) {
          this.prodNum = 1
          return
        }
        // 判断是否限购
        if (this.hasMaxNum) {
          if (prodNum < this.defaultSku.stocks && prodNum < this.maxNum) {
            this.prodNum = prodNum + 1
          } else if (prodNum <= this.defaultSku.stocks && this.defaultSku.stocks < this.maxNum) {
            this.$message({
              message: this.$t('prodDetail.insufficientInventory'),
              type: 'warning',
              duration: 1000
            });
            this.prohibit1 = false  // -是否禁用
            this.prohibit2 = true  // +是否禁用
          } else {
            this.$message({
              message: this.$t('purchaseRestrictions') + '\xa0' + this.maxNum + '\xa0' + this.$t('items'),
              type: 'warning',
              duration: 1000
            });
            this.prohibit1 = false  // -是否禁用
            this.prohibit2 = true  // +是否禁用
          }
        } else {
          if (prodNum < this.defaultSku.stocks) {
            this.prodNum = prodNum + 1
          } else {
            this.$message({
              message: this.$t('prodDetail.insufficientInventory'),
              type: 'warning',
              duration: 1000
            });
            this.prohibit1 = false  // -是否禁用
            this.prohibit2 = true  // +是否禁用
          }
        }
      } else {
        this.prodNum = 0
        this.prohibit1 = true  // -是否禁用
        this.prohibit2 = true  // +是否禁用
      }
    },

    /**
     * 请求优惠券列表
     */
    getCouponList() {
      this.$axios.get('/coupon/listByProdId', {
        params: {
          prodId: this.$route.params.prodId,
          shopId: this.prodInfo.shopId
        }
      }).then(({ data }) => {
        this.couponList = data
      })
    },


    /**
     * 组装SKU
     */
    groupSkuProp: function (skuList, defaultPrice) {
      if (skuList.length == 1 && skuList[0].properties == "") {
        this.defaultSku = skuList[0]
        this.imgCounts = this.prodImgs.length
        this.$refs.carouser.style.width = this.imgCounts * 78 + 'px'  // 设置图片盒子的初始宽度
        return;
      }
      var skuGroup = {};
      var allProperties = [];
      var propKeys = [];
      var selectedPropObj = {}
      var defaultSku = null;
      for (var i = 0; i < skuList.length; i++) {
        var isDefault = false;
        if (!defaultSku && skuList[i].price == defaultPrice) { //找到和商品价格一样的那个SKU，作为默认选中的SKU
          defaultSku = skuList[i];
          isDefault = true;
        }
        var properties = skuList[i].properties; //版本:公开版;颜色:金色;内存:64GB
        allProperties.push(properties);
        var propList = properties.split(";"); // ["版本:公开版","颜色:金色","内存:64GB"]

        for (var j = 0; j < propList.length; j++) {

          var propval = propList[j].split(":"); //["版本","公开版"]
          var props = skuGroup[propval[0]]; //先取出 版本对应的值数组

          //如果当前是默认选中的sku，把对应的属性值 组装到selectedProp
          if (isDefault) {
            propKeys.push(propval[0]);
            selectedPropObj[propval[0]] = propval[1];
          }

          if (props == undefined) {
            props = []; //假设还没有版本，新建个新的空数组
            props.push(propval[1]); //把 "公开版" 放进空数组
          } else {
            if (props.indexOf(propval[1]) === -1) { //如果数组里面没有"公开版"
              props.push(propval[1]); //把 "公开版" 放进数组
            }
          }
          skuGroup[propval[0]] = props; //最后把数据 放回版本对应的值
        }
      }
      this.imgCounts = defaultSku.pic ? this.prodImgs.length + 1 : this.prodImgs.length
      this.$refs.carouser.style.width = this.imgCounts * 78 + 'px'  // 设置图片盒子的初始宽度
      this.defaultSku = defaultSku
      this.propKeys = propKeys
      this.selectedPropObj = selectedPropObj
      // 商品图片多出来
      this.parseSelectedObjToVals(skuList);
      this.skuGroup = skuGroup
      this.allProperties = allProperties
    },

    /**
     * 将已选的 {key:val,key2:val2}转换成 [val,val2]
     */
    parseSelectedObjToVals: function (skuList) {
      var selectedPropObj = this.selectedPropObj
      var selectedProperties = "";
      var selectedProp = [];
      for (var key in selectedPropObj) {
        selectedProp.push(selectedPropObj[key]);
        selectedProperties += key + ":" + selectedPropObj[key] + ";";
      }
      selectedProperties = selectedProperties.substring(0, selectedProperties.length - 1);
      this.selectedProp = selectedProp
      this.selectedProperties = selectedProperties
      this.selectedPropObj = selectedPropObj

      var findSku = false;
      for (var i = 0; i < skuList.length; i++) {
        if (skuList[i].properties == selectedProperties) {
          findSku = true;
          this.defaultSku = skuList[i]
          this.changeSkuImg(this.defaultSku.pic);
          break;
        }
      }
      this.findSku = findSku
    },

    /**
     * 切换SKU图片
     */
    changeSkuImg(skuPic) {
      if (skuPic) {
        // if (this.prodImgs[0].sku) {
        //   this.prodImgs.splice(0, 1)
        // }
        this.prodImgs.forEach(prodImg => {
          prodImg.isActive = false
        })
        // this.prodImgs.splice(0, 0, {
        //   img: skuPic,
        //   isActive: true,
        //   sku: true
        // });
        this.prodInfo.pic = skuPic
      }
    },

    /**
     * 判断当前的规格值 是否可以选
     */
    isSkuLineItemNotOptional(allProperties, selectedPropObj, key, item, propKeys) {
      var selectedPropObj = Object.assign({}, selectedPropObj)
      var properties = "";
      selectedPropObj[key] = item;
      for (var j = 0; j < propKeys.length; j++) {
        properties += propKeys[j] + ":" + selectedPropObj[propKeys[j]] + ";";
      }
      properties = properties.substring(0, properties.length - 1);
      for (var i = 0; i < allProperties.length; i++) {
        if (properties == allProperties[i]) {
          return false;
        }
      }
      for (var i = 0; i < allProperties.length; i++) {
        if (allProperties[i].indexOf(item) >= 0) {
          return true;
        }
      }
      return false;
    },

    /**
     * 规格点击事件
     */
    toChooseItem(skuLineItem, key, event) {
      this.selectedPropObj[key] = skuLineItem;
      this.parseSelectedObjToVals(this.prodInfo.skuList);
      if (this.defaultSku.stocks) { // 有库存
        this.prodNum = 1
        this.prohibit1 = true
        this.prohibit2 = false
      } else {
        this.prodNum = 0
        this.prohibit1 = true  //禁用
        this.prohibit2 = true  //禁用
      }
    },

    /**
    * 加入购物车
    */
    addToCart() {
      if (!this.findSku) {
        return;
      }
      if (!this.prodNum || this.prodNum <= 0) {
        this.$message({
          message: this.$t('prodDetail.pleaseEnterTheCorrectNumberOfItems'),
          type: 'warning',
          duration: 1000
        });
        return
      }
      this.$axios.post('/p/shopCart/changeItem', {
        basketId: 0,
        count: this.prodNum,
        prodId: this.$route.params.prodId,
        shopId: this.prodInfo.shopId,
        shopName: this.shopInfo.shopName,
        skuId: this.defaultSku.skuId,
        // distributionCardNo: this.distributionCardNo
      }).then(({ data }) => {
        util.tapLog(4, null, null, this.prodNum)
        this.getCartCount()
        this.$message.success(this.$t('prodDetail.successfullyAddedCart'))
      })
    },

    /**
     * 获取购物车商品总数
     */
    getCartCount() {
      this.$axios.get('/p/shopCart/prodCount').then(({ data }) => {
        this.$store.commit('cartNumber/changeCartNumber', data)
      })
    },

    /**
    * 立即购买
    */
    buyNow() {
      if (!this.findSku) {
        this.$message.error(this.$t('prodDetail.productNotInStock')+'~')
        return;
      }
      if (!this.prodNum || this.prodNum <= 0) {
        this.$message({
          message: this.$t('prodDetail.pleaseEnterTheCorrectNumberOfItems'),
          type: 'warning',
          duration: 1000
        });
        return
      }
      if (!this.defaultSku.stocks || this.prodNum > this.defaultSku.stocks) {
        this.$message({
          message: this.$t('prodDetail.insufficientInventory'),
          type: 'warning',
          duration: 1000
        });
        return
      }
      if (!Cookie.get('token')) {
        bus.$emit("showLogin", true)
      } else {
        sessionStorage.setItem("orderItem", JSON.stringify({
          prodId: this.prodInfo.prodId,
          skuId: this.defaultSku.skuId,
          prodCount: this.prodNum,
          shopId: this.prodInfo.shopId
        }));
        this.$router.push({
          path: '/submit-order?orderEntry=1',
        })
      }
    },

    /**
    * 领取优惠券
    */
    receiveCoupon(coupon) {
      this.$axios.post('/p/myCoupon/receive', coupon.couponId).then(({ data }) => {
        if (data) {
          this.$message({
            message: data,
            type: 'success',
            duration: 1000
          })
        }
      })
    },
    toShopIndex() {
      var searchTerms = this.prodName.trim() //去除字符串的头尾空格
      if (!searchTerms) {
        this.$message({
          message: this.$t('prodDetail.searchContentCannotBeEmpty'),
          type: 'error',
          duration: 1000
        })
        return
      }
      // 跳转到商品列表页
      let url = '/shopIndex?sid=' + this.shopId + '&pn=' + searchTerms
      this.$router.push({ path: url })
    },

    //跳转活动详情
    toDiscountDetail(discountId) {
      this.$router.push({
        path: '/discount-detail',
        query: {
          discountId: discountId
        }
      })
    },

    // 跳转商家客服
    toChatIm (prodInfo) {

      if (Cookie.get('token')) {

      let routeUrl = this.$router.resolve({
        path: '/chat?shopId=' + prodInfo.shopId + '&prodId=' + prodInfo.prodId
      });
      window.open(routeUrl.href, 'view_window');

      } else {
        this.showLogin = true
      }

    },

    /**
     * 隐藏登录弹窗
     */
    hideLoginPop () {
      this.showLogin = false
    },

  },

  destroyed() {
    // 页面销毁时移除监听
    window.removeEventListener('scroll', this.handleScroll);
  },



}
</script>

<style  src='~/assets/css/detail.css'></style>
